<template>
  <div id="passenger-detail" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item ms-1">
          <router-link to="/h5/customers">企业客户</router-link>
        </li>
        <li class="breadcrumb-item">
          <router-link to="/h5/passengers">员工信息</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">详情</li>
        <span class="ms-auto me-1" @click.stop="back()">返回</span>
      </ol>
    </nav>

    <template v-if="psgInfo !== null">
      <ul class="nav nav-tabs nav-bordered mb-3" id="myTab" role="tablist">
        <li class="nav-item">
          <a
            class="nav-link active"
            id="basic-tab"
            data-bs-toggle="tab"
            href="#basicTab"
            role="tab"
            >基础信息</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="id-tab"
            data-bs-toggle="tab"
            href="#idTab"
            role="tab"
            >证件信息</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="ffp-tab"
            data-bs-toggle="tab"
            href="#ffpTab"
            role="tab"
            >常旅客信息</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="ot-tab"
            data-bs-toggle="tab"
            href="#otTab"
            role="tab"
            >其它信息</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="login-tab"
            data-bs-toggle="tab"
            href="#loginTab"
            role="tab"
            >会员信息</a
          >
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="basicTab" role="tabpanel">
          <div class="card">
            <div class="card-header">
              基础信息
              <router-link
                class="float-end me-2"
                :to="`/h5/passenger?id=` + psgInfo.id"
                >修改</router-link
              >
            </div>
            <div class="card-body">
              <dl class="row">
                <dt class="col-4 text-end">中文名</dt>
                <dd class="col-8">
                  {{ psgInfo.nameCn }}
                  <span class="text-danger" v-if="psgInfo.vipLevel > 0">
                    VIP-{{ psgInfo.vipLevel }}
                  </span>
                </dd>
                <dt class="col-4 text-end">英文名</dt>
                <dd class="col-8">
                  {{ psgInfo.nameEn }}
                </dd>
                <dt class="col-4 text-end">firstName</dt>
                <dd class="col-8">{{ psgInfo.firstName }}</dd>
                <dt class="col-4 text-end">lastName</dt>
                <dd class="col-8">{{ psgInfo.lastName }}</dd>
                <dt class="col-4 text-end">性别</dt>
                <dd class="col-8">{{ getGenderDesc(psgInfo.gender) }}</dd>
                <dt class="col-4 text-end">公司</dt>
                <dd class="col-8">{{ showCustomerName(psgInfo) }}</dd>
                <dt class="col-4 text-end">部门</dt>
                <dd class="col-8">
                  <template v-if="psgInfo.department !== null">
                    {{ psgInfo.department.name }}
                  </template>
                </dd>
                <dt class="col-4 text-end">职位</dt>
                <dd class="col-8">
                  <template v-if="psgInfo.position !== null">
                    {{ psgInfo.position.name }}
                  </template>
                </dd>
                <dt class="col-4 text-end">手机</dt>
                <dd class="col-8">{{ psgInfo.mobile }}</dd>
                <dt class="col-4 text-end">电话</dt>
                <dd class="col-8">{{ psgInfo.phone }}</dd>
                <dt class="col-4 text-end">电子邮件</dt>
                <dd class="col-8">{{ psgInfo.email }}</dd>
                <dt class="col-4 text-end">生日</dt>
                <dd class="col-8">{{ psgInfo.birthday }}</dd>
              </dl>
            </div>
            <div class="card-footer">
              <button
                class="btn btn-danger float-end"
                @click.stop="deletePsg(psgInfo.id)"
                v-if="isAdmin"
              >
                删除
              </button>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="idTab" role="tabpanel">
          <div class="card">
            <div class="card-header">证件信息</div>
            <div class="card-body" v-for="(info, index) in psgInfo.idInfos">
              <div class="row">
                <label class="control-label col-4 text-end"> 证件类型 </label>
                <div class="col-8">
                  <select
                    class="form-control input-group-addon"
                    v-model.number="info.idType"
                    disabled
                  >
                    <option
                      :value="idTypeInfo.idType"
                      v-for="idTypeInfo of idTypes"
                    >
                      {{ idTypeInfo.idName }}
                    </option>
                  </select>
                </div>
              </div>
              <div class="row">
                <label class="control-label col-4 text-end"> 证件号 </label>
                <div class="col-8">
                  {{ info.idNo }}
                </div>
              </div>

              <div class="row" v-if="info.idType !== 1">
                <label class="control-label col-4 text-end">
                  签发国家/地区
                </label>
                <div class="col-8">
                  {{ info.idIssueNation }}
                </div>
              </div>
              <div class="row" v-if="info.idType !== 1">
                <label class="control-label col-4 text-end"> 有效期 </label>
                <div class="col-8">
                  {{ info.idValidDate }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="ffpTab" role="tabpanel">
          <div class="card">
            <div class="card-header">常旅客信息</div>
            <div class="card-body" v-for="(info, index) in psgInfo.ffpNos">
              <div class="row">
                <label class="control-label col-4 text-end"> 航司 </label>
                <div class="col-8">
                  {{ info.carrier }}
                </div>
              </div>
              <div class="row">
                <label class="control-label col-4 text-end"> 常旅客卡号 </label>
                <div class="col-8">
                  {{ info.ffpNo }}
                </div>
              </div>
              <div class="row" v-if="info.idType !== 1">
                <label class="control-label col-4 text-end"> 卡类型 </label>
                <div class="col-8">
                  {{ info.ffpType }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="otTab" role="tabpanel">
          <div class="card">
            <div class="card-header">其它信息</div>
            <div class="card-body">
              <dl class="row">
                <dt class="col-4 text-end">常旅客卡号</dt>
                <dd class="col-8">
                  {{ psgInfo.ffpNo }}
                </dd>
                <dt class="col-4 text-end">飞机等级</dt>
                <dd class="col-8">
                  {{ psgInfo.flightLevel }}
                </dd>
                <dt class="col-4 text-end">火车等级</dt>
                <dd class="col-8">
                  {{ psgInfo.trainLevel }}
                </dd>
                <dt class="col-4 text-end">喜好</dt>
                <dd class="col-8">
                  {{ psgInfo.hobby }}
                </dd>
                <dt class="col-4 text-end">备注</dt>
                <dd class="col-8">
                  {{ psgInfo.remark }}
                </dd>
              </dl>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="loginTab" role="tabpanel">
          <div class="card">
            <div class="card-header">会员信息</div>
            <div class="card-body" v-if="loginInfoCount === 0">
              <button
                class="btn btn-primary btn-sm"
                @click.stop="generateLoginInfo()"
              >
                生成会员信息
              </button>
            </div>
            <customer-login-info
              :customerId="customerId"
              :passengerId="id"
              :count.sync="loginInfoCount"
            ></customer-login-info>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { showCustomerName } from "@/common/common.js";
import {
  searchPassengerById,
  deletePsgById,
  generateLoginInfoByPsgId,
} from "@/api/user.js";
import MyPagination from "@/components/my-pagination.vue";
import MyDatePicker from "@/components/my-datepicker.vue";
import CustomerLoginInfo from "./customer-login-info.vue";

export default {
  components: {
    MyPagination,
    MyDatePicker,
    CustomerLoginInfo,
  },
  data() {
    return {
      id: 0,
      customerId: 0,

      loginInfoCount: 0,

      // dataList: [],
      // customers: [],
      // departments: [],

      // sc: {
      //   rowCount: 0,
      //   pageNo: 1,
      //   pageSize: 20,
      //   pageTotal: 0
      // },
      // searchName: '',

      psgInfo: null,
    };
  },
  computed: {
    idTypes() {
      return this.$store.state.idTypes;
    },
    isAdmin() {
      return this.$store.getters.isDataAdmin;
    },
  },
  watch: {
    loginInfoCount: function (newVal) {
      console.log(newVal);
    },
  },
  mounted: function () {
    this.id = parseInt(this.$route.params.id);
    // console.log(this.id)
    this.search();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    search: function () {
      searchPassengerById(this.id, (v) => {
        this.psgInfo = v;
        this.customerId = v.customer.id;
      });
    },
    getGenderDesc: function (val) {
      if (val === 1) {
        return "男";
      } else if (val === 2) {
        return "女";
      } else {
        return "";
      }
    },
    deletePsg: function () {
      const msg = "确定删除吗 ?";
      if (confirm(msg) == true) {
        // return true;
      } else {
        return;
      }

      deletePsgById(this.id, (v) => {
        if (v.status === "OK") {
          this.$router.push("/passengers");
        } else {
          this.showErrMsg(this.errmsg);
        }
      });
    },
    generateLoginInfo: function () {
      generateLoginInfoByPsgId(this.id, (v) => {
        if (v.status === "OK") {
          this.showErrMsg("创建成功");
        } else {
          this.showErrMsg("操作失败: " + v.errMsg, "danger");
        }
      });
    },
    showCustomerName: function (info) {
      return showCustomerName(info);
    },
  },
};
</script>
